<template>
  <!-- 老规矩一个模块下面只能包含着一个div -->
  <div>
    <!-- 第一排 -->
    <el-row :gutter="30" style="margin:0px 0px 15px 0px;">
      <el-col :span="24">
        订单编号:
        <el-input v-model="orderCode" placeholder="请输入订单编号" style="width:300px;"></el-input>
        用户姓名:
        <el-input v-model="userName" placeholder="请输入用户姓名" style="width:300px;"></el-input>
        用户手机:
        <el-input v-model="phone" placeholder="请输入用户手机" style="width:300px;"></el-input>
        支付状态:
        <el-select v-model="status" clearable placeholder="支付状态">
          <el-option
              v-for="item in options"
              placeholder='请选择'
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="getAllOrder">订单查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 表格展示数据 -->
        <el-table :data="OrderData" border style="width:1320px;">
          <el-table-column fixed prop="id" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="orderCode" label="订单编号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="orderMoney" label="订单金额" width="120" align="center">
          </el-table-column>
          <el-table-column prop="orderCreatetime" label="订单创建时间" width="200" align="center">
          </el-table-column>
          <el-table-column prop="orderPaymenttime" label="支付时间" width="120" align="center">
          </el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.orderStatus==0" type="info">未支付</el-tag>
              <el-tag v-if="scope.row.orderStatus==1">已支付</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户姓名" width="120" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="用户手机" width="120" align="center">
          </el-table-column>
          <el-table-column prop="address" label="用户地址" width="120" align="center">
          </el-table-column>
          <el-table-column label="食物">
            <template slot-scope="scope">
              <el-tag type="info" :key="food.foodName" v-for="food in scope.row.foods">{{food.foodName}}*{{food.foodNum}}</el-tag>
            </template>
          </el-table-column>

        </el-table>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      orderCode: '',
      userName: '',
      phone: '',
      OrderData: null,//所有订单信息
      dialogTableVisible:false,//弹出层
      status: '',//支付状态
      options: [{
        value: '0',
        label: '未支付'
      }, {
        value: '1',
        label: '已经支付'
      }, {
        value: '2',
        label: '已取消'
      }
      ],
    }
  },
  //钩子函数
  mounted() {
     this.getAllOrder();//调用全查方法
  },
  methods: {
    // 全查方法
    getAllOrder() {
      //请求方式为get
      this.$axios({
        method:"get",
        url:"http://localhost:9527/backstagesupporter/orde/getAllOrders",
        params:{
          orderCode:this.orderCode,
          userName:this.userName,
          phone:this.phone,
          status:this.status
        }
      })
      .then( res =>{
        this.OrderData = res.data.data
        for (let i = 0; i <this.OrderData.length ; i++) {
          console.log(this.OrderData[i].foods)
        }
      })
    },

  }
}
</script>

<style scoped>

</style>
